<template>
    <div class="search-box">
        <div class="row">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button @click="queryReset()">重置</el-button>
                <el-button type="primary" @click="querySearch()">查询搜索</el-button>
            </div>
        </div>
        <div class="row">
            <span>角色名称:</span>
            <el-input placeholder="请输入姓名或者账号" v-model="queryParams.keyword" @input="queryLenght"></el-input>
        </div>
    </div>
    <div class="search-box">
        <div class="row_tow">
            <div class="left">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button type="primary" @click="showDialog = true" v-permission="'addUser'">添加</el-button>
            </div>
        </div>
    </div>
    <el-table :data="userList" border table-layout="auto" cell-class-name="align-c">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="角色名称" prop="name" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="用户数" prop="adminCount" />
        <el-table-column label="添加时间" prop="createTime">
            <template #default="{ row }">
                <span>{{ formateDate(row.createTime) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否启用">
            <template #default="{ row }">
                <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="switchStatus(row)" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button text type="primary" @click="allocMenu(row.id)"
          v-permission="'allocRole'">分配菜单</el-button>
                <el-button text type="primary" @click="router.push('/ums/allocResource?id='+row.id)">分配资源</el-button>
                <el-button text type="primary" @click="editUser(row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-config-provider :locale="zhCn">
        <div class="page">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="RoleUserList" @current-change="RoleUserList" />
        </div>
    </el-config-provider>
    <EditMenu :isShow="showDialog" @hide="closeDialog" :toChildrenData="toChildrenData" />
</template>
<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { getRoleListApi, switchUserStatusApi, userRoleListApi, roleUserStatusApi } from './api';
import { formateDate } from "@/utils";
import { Search, Tickets } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus';
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import EditMenu from "./editMenu.vue"
import {useRouter} from "vue-router"
const router = useRouter()
const showDialog = ref(false)

let userList = ref<IRoleModel[]>([])

let queryParams = reactive<IUserListParams>({
    keyword: "",
    pageNum: 1,
    pageSize: 10
})
const allocMenu = (id: number) => {

  router.push("/ums/allocMenu?id=" + id);
};
const closeDialog = () => {
    showDialog.value = false
    RoleUserList()
}

const total = ref()
// 列表数据请求
const RoleUserList = () => {
    userRoleListApi(queryParams.keyword as string, queryParams.pageNum, queryParams.pageSize).then((res) => {
        if (res.code === 200) {
            userList.value = res.data.list
            total.value = res.data.total
        }
    })
}
RoleUserList()

// 编辑代码
let toChildrenData = reactive({
    id: 0,
    name: '',
    description: ''
})

// 编辑
const editUser = (row: IRoleModelTwo) => {
    toChildrenData.id = row.id as number
    toChildrenData.name = row.name
    toChildrenData.description = row.description
    showDialog.value = true

}

// 查询搜索
const querySearch = () => {
    if (queryParams.keyword?.trim()) {
        RoleUserList()
    } else {
        ElMessage.error("请先输入搜索内容")
    }
}
// 重置
const queryReset = () => {
    if (queryParams.keyword?.trim()) {
        queryParams.keyword = ''
        RoleUserList()
    }
}

const queryLenght = () => {
    if (!queryParams.keyword?.trim()) {
        RoleUserList()
    }
}

// 是否启用
const switchStatus = (row: IRoleModel) => {
    roleUserStatusApi(row.id as number, row.status).then((res) => {
        if (res.code === 200) {
            ElMessage.success("修改成功")
        } else {
            row.status = row.status === 1 ? 0 : 1
        }
    }).catch(() => {
        row.status = row.status === 1 ? 0 : 1
    })
}
</script>
<style lang="less" scoped>
:deep(.align-c),
:deep(.cell) {
    text-align: center;
}

.search-box {
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;

    .row {
        padding: 0 0 20px 0;
        display: flex;
        align-items: center;

        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            width: 300px;
            display: flex;
            align-items: center;
            margin-left: 20px;

            span {
                width: 120px;
            }
        }
    }

    .left {

        span {
            margin-left: 10px;
        }
    }

    .row_tow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.page {
    margin: 20px 0;
    height: 20px;

    :deep(.el-pagination) {
        float: right;

    }
}
</style>